<template>
    <div class="main-content">
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="70px" label-position="right">
                    <el-row :gutter="41">
                       <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync="query.provinceName"></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync="query.cityName"></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync="query.areaName"></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    <el-row :gutter="41">
                        <el-col :span="7">
                             <el-form-item label="模块名称">
                                <el-select v-model="query.modulesName" placeholder="请选择模块名称"
                                style="width:100%">
                                    <el-option v-for="(item,index) in modulesNameArr" 
                                    :key="index" :label="item.moduleName" :value="item.moduleValue"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="角色" prop="roleId"> 
                               <el-select v-model="query.roleId" placeholder="请选择" style="width:100%">
                                    <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="报表日期" prop="reportDate">
                               <el-date-picker v-model="query.reportDate" :editable="false" :clearable="false" type="date" placeholder="请选择报表日期" style="width:100%" :picker-options="pickerOptions1"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="onSubmit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" >
                <div class="charts-title">模块点击量  TOP10</div>
                <div class="charts-display" v-loading='chartLoading'>
                    <trendChart width='100%' height='100%' id="trendChart1" :option='barChart1Option'></trendChart>
                </div>
            </div>
            <div slot="table" >
                <div class="table-title">
                    <exportExcel @ee="exportFile"></exportExcel>
                </div> 
                <el-table :data="tableData" border v-loading="loading" style="width: 100%"  @sort-change='sortChange'>
                    <el-table-column label="模块名称" align="center">
                        <template scope="scope">
                            <span>{{scope.row.moduleName | isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="使用人数" align="center" sortable='custom' prop="userNumber">
                        <template scope="scope">
                            <span>{{scope.row.userNumber| isNull}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="使用次数" align="center" sortable='custom' prop="useNumber">
                        <template scope="scope">
                            <span>{{scope.row.useNumber| isNull}}</span>
                        </template>
                    </el-table-column>
    
                    <el-table-column label="角色" align="center">
                        <template scope="scope">
                            <span>{{scope.row.userTypeName | filterName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center">
                        <template scope="scope">
                            <span>{{scope.row.areaName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="城市" align="center">
                        <template scope="scope">
                            <span>{{scope.row.cityName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="省份" align="center">
                        <template scope="scope">
                            <span>{{scope.row.provinceName | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </echartsLayout>
    </div>
</template>

<script>
    import moment from 'moment';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import exportExcel from 'components/ExportExcel'; 
    import { mapState, mapActions } from 'vuex';
    import { ListModules, findModuleClickTop10, findModuleClickCount} from 'api/pingtaifenxi';
    export default{
        name: 'modulesHits',
        components: {province, city, region, echartsLayout, trendChart, exportExcel},
        data() {
            return {
                chartLoading: false,
                loading: false,
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    provinceName: '',
                    cityName: '',
                    areaName: '',
                    modulesName: '',
                    roleId: '',
                    reportDate: new Date()
                }, 
                useNumberStatus: '',
                userNumberStatus: '1',
                roleList: [{  
                    value: '',
                    label: '请选择'  
                }, {
                    value: '1',
                    label: '家长'
                }, {
                    value: '2',
                    label: '教师'
                }, {
                    value: '4',
                    label: '学生'
                }],
                modulesNameArr: [],
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                },
                barChart1Option: null,
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                filterList: null
            }
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        created() {
            this.modulesNameArrs();
            this.queryData();
            this.getTableList();
        },
        filters: {
            filterName(val) {
                if (val=='1') {
                    return '家长'
                }
                if (val=='2') {
                    return '教师'
                }
                if (val=='4') {
                    return '学生'
                }
                if (!val) {
                    return '--'
                }
            }
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.getTableList();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.getTableList();
            },
            onSubmit() {
                this.pageQuery.currentpage = 1;
                this.queryData();
                this.getTableList();
            },
            modulesNameArrs() {
                ListModules().then(res => {
                    this.modulesNameArr=res.data.content;
                    this.modulesNameArr.unshift({moduleName: '请选择', moduleValue: ''})
                })
            },
            queryData() {
                this.chartLoading = true;
                let date= this.query.reportDate==''?'':moment(this.query.reportDate).format('YYYY-MM-DD'),
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName,
                    moduleId=this.query.modulesName,
                    userType=this.query.roleId;
                findModuleClickTop10(date, provinceName, cityName, areaName, moduleId, userType).then(res => {
                    this.chartLoading = false;
                    let xAxisData = [];
                    let bar1 = {
                        name: '使用次数',
                        type: 'bar',
                        data: []
                    };
                    let bar2 = {
                        name: '使用人数',
                        type: 'bar',
                        data: []
                    };
                    res.data.content.forEach(val => {
                        if (val.moduleName) {
                            xAxisData.push(val.moduleName)
                            bar1.data.push(val.useNumber)
                            bar2.data.push(val.userNumber)
                        }
                    })
                    this.barChart1Option = {
                        color: ['#2EC7C9', '#B6A2DE'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line'
                            }
                        },
                        legend: {
                            data: ['使用人数', '使用次数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: xAxisData // ['作业', '学情分析', 'e启学霸', '空中课堂', 'e直播', '积分商城', '空间', '成长轨迹', '成绩', '提分中心']
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        series: [bar2, bar1]
                    };

                }).catch(() => {
                    this.chartLoading = false;
                });
              
            },
            exportFile() {
                let date = this.query.reportDate==''?'':moment(this.query.reportDate).format('YYYY-MM-DD'),
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName,
                    moduleId=this.query.modulesName,
                    userType=this.query.roleId,
                    useNumberStatus=this.useNumberStatus,
                    userNumberStatus=this.userNumberStatus;
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelByModuleClick?date=${date}&provinceName=${provinceName}&cityName=${cityName}&areaName=${areaName}&moduleId=${moduleId}&userType=${userType}&useNumberStatus=${useNumberStatus}&userNumberStatus=${userNumberStatus}`
                    
            },
            getTableList() {
                this.loading = true;
                let date = this.query.reportDate==''?'':moment(this.query.reportDate).format('YYYY-MM-DD'),
                    page = this.pageQuery.currentpage,
                    pageSize = this.config.pageSize,
                    provinceName=this.query.provinceName,
                    cityName=this.query.cityName,
                    areaName=this.query.areaName,
                    moduleId=this.query.modulesName,
                    userType=this.query.roleId,
                    useNumberStatus=this.useNumberStatus,
                    userNumberStatus=this.userNumberStatus;
                findModuleClickCount(page, pageSize, date, provinceName, cityName, areaName, moduleId, userType, useNumberStatus, userNumberStatus).then(res => {
                    this.loading = false;
                    this.tableData = res.data.content.list;
                    this.pageQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                    this.tableData = [];
                });
               
            },
            sortChange({ column, prop, order }) {
                this.useNumberStatus=prop=='useNumber'?order=='ascending'?'0':'1':'';
                this.userNumberStatus =prop=='userNumber'?order=='ascending'?'0':'1':'';
                this.pageQuery.currentpage = 1;
                this.getTableList();
            }

          
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        $bgcolor: #fff;
    }
</style>                     